CQRS Pattern — Separate reads and writes

CQRS separates command (write) operations from query (read) operations to keep models focused.

Example (TypeScript)

type Order = { id: string; status: string };

// Query model (read-optimized)
const fetchOrder = async (id: string): Promise<Order> => {
  const res = await fetch(`/api/orders/${id}`);
  return res.json();
};

// Command model (write-optimized)
const updateOrderStatus = async (id: string, status: string) => {
  await fetch(`/api/orders/${id}/status`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ status })
  });
};

Why it matters in frontend

• Separate cached read models from mutation flows.
• Keep optimistic updates and cache invalidation explicit.
• Align with data fetching libraries (React Query/SWR).

Questions & Answers